<template>
  <!-- :label-position="labelPosition":对齐位置  :label-width="80px":label的宽度-->
  <el-form class="form" label-width="80px">
    <!-- 循环遍历config数组 -->
    <template v-for="item in searchConfig.config">
      <el-form-item :label="item.label" :key="item.id" v-model="formData[item.field]" size="medium">
        <!-- 简单的文本输入框 -->
        <template v-if="item.type == 'input'">
          <el-input :placeholder="item.placeholder" v-model="formData[item.field]"></el-input>
        </template>
        <!-- 下拉 -->
        <template v-if="item.type == 'select'">
          <el-select :placeholder="item.placeholder" v-model="formData[item.field]">
            <el-option :label="item1.label" v-for="item1 in item.children" :key="item1.id" :value="item1.value"></el-option>
          </el-select>
        </template>
        <!-- 时间选择 -->
        <template v-if="item.type == 'time'">
          <el-date-picker type="date" :placeholder="item.placeholder" :key="item.id" v-model="formData[item.field]"></el-date-picker>
        </template>
        <!-- 一片区域的输入 -->
        <template v-if="item.type == 'textarea'">
          <el-input type="textarea" :placeholder="item.placeholder" :maxlength="item.maxlength" show-word-limit v-model="formData[item.field]"></el-input>
        </template>
        <!-- 复选框 -->
        <template v-if="item.type == 'checkbox'">
          <el-checkbox-group  v-model="formData[item.field]">
              <el-checkbox v-for="temp in item.list" :label="temp.city" :key="temp.city">{{temp}}</el-checkbox>
          </el-checkbox-group>
        </template>
        <!-- 单选框 -->
        <template>
          <!-- <el-radio v-model="radio" label="1">备选项</el-radio> -->
        </template>
      </el-form-item>
    </template>
    <!-- 重置和搜索区域 -->
    <slot name="btns"></slot>
  </el-form>

</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    searchConfig: {
      type: Object,
      require:true
    },
    formData: {
      type:Object,
      require:true
    }
  },
  wather: {
    formData(newVal) {
      this.$emit('changeVal',newVal)
    }
  },
  // methods: {
  //   onSubmit() {
  //     this.$emit('submit')
  //   }
  // }
};
</script>
<style scoped>
  .form {
    display: flex;
  }
</style>
